<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <ul class="list"></ul>


    <script>    
        const data = [
            {
                id: 1,
                name: 'jack'
            },
            {
                id: 2,
                name: 'mike'
            },
            {
                id: 3,
                name: 'rose'
            },
            {
                id: 4,
                name: 'luci'
            },
        ]

        const list = document.querySelector('.list')


        function render(data) {
            list.innerHTML = ''
            data.forEach((item, index) => {
                const li = document.createElement('li')
                li.index = index
                li.innerHTML = `${item.id}.${item.name}`
                li.draggable = true

                li.addEventListener('dragstart', function (e) {
                    e.dataTransfer.setData('index', e.target.index)
                })

                li.addEventListener('dragover', function (e) {
                    e.preventDefault()
                })

                li.addEventListener('drop', function (e) {
                    const dragTargetIndex = e.dataTransfer.getData('index')
                    const dropTargetIndex = e.target.index
                    const dragTarget = data.splice(dragTargetIndex, 1)
                    data.splice(dropTargetIndex, 0, dragTarget[0])
                    render(data)
                })

                list.append(li)
            })
        }

        render(data)

    </script>
</body>

</html>